import * as React from 'react'
import { render } from 'react-dom'
import './index.less'
import Agent from './agent'
import Cros from './cros'
import Badge from './badge'
interface Props {

}
interface State {
    type: number,
}
class App extends React.Component<Props, State>{
    constructor(props: any) {
        super(props)
        this.state = {
            type: 1,
        }
    }
   
    render() {
        return (
            <div className="popup">
                <div className="menu">
                    <span onClick={()=>{
                        this.setState({type:1})
                    }} className={this.state.type === 1 ? "act menu-item" : "menu-item"}>请求代理</span>
                    <span 
                    onClick={()=>{
                        this.setState({type:2})
                    }}  className={this.state.type === 2 ? "act menu-item" : "menu-item"}>请求跨域</span>
                    <Badge></Badge>
                </div>
                {
                    this.state.type === 1 && <Agent />
                }
                {
                    this.state.type === 2 && <Cros />
                }
            </div>
        )
    }
}

render(<App />, document.getElementById('app'))